<template>
	<view class="classify">
		<view class="block">
			<view class="list">
				<view class="item" v-for="item in dataObj.questionObj.list" :key="item.id" @click="onPageTap(item)">
					<image class="cover" :src="item.exam_img"></image>
					<view class="title">{{item.exam_name}}</view>
					<!-- #ifndef MP-WEIXIN -->
					<view class="state intro">价格：{{toFixed(item.exam_price)}}元</view>
					<image class="cart" src="../../static/images/question/cart.png" @click.stop="onAddCartTap(item.id)"></image>
					<!-- #endif -->
				</view>
			</view>
		</view>
		
		<!-- <header-main
			:index="pageObj.tabIndex"
			:tabList="pageObj.tabList"
			@tabClick="tabClick">
		</header-main>
		<swiper
			class="body-swiper"
			:style="{height: pageObj.screenHeight + 'px'}"
			:current="pageObj.tabIndex"
			@change="bodySwiperChange">
			
			<swiper-item class="body-swiper-item">
				<view class="block">
					<view class="header">
						<span>选择分类</span>
						<view class="select-type">
							<view class="select-type-item" :class="dataObj.questionObj.typeValue === item.value ? 'selected' : ''" v-for="item in dataObj.questionObj.typeList" :key="item.value" @click="onCatalogsTap(item.value)">{{item.name}}</view>
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="item in dataObj.questionObj.list" :key="item.id" @click="onPageTap(item.id)">
							<image class="cover" :src="item.exam_img"></image>
							<view class="title">{{item.exam_name}}</view>
							<view class="state intro">价格：{{item.exam_price}}元</view>
							<image class="cart" src="../../static/images/question/cart.png" @click.stop="onAddCartTap(item.id)"></image>
						</view>
					</view>
				</view>
			</swiper-item>
			
			<swiper-item class="body-swiper-item">
				<view class="block">
					<view class="header">
						<span>选择分类</span>
						<view class="select-type">
							<view class="select-type-item" :class="dataObj.testObj.typeValue === item.value ? 'selected' : ''" v-for="item in dataObj.testObj.typeList" :key="item.value" @click="onCatalogsTap(item.value)">{{item.name}}</view>
						</view>
					</view>
					<view class="list">
						<view class="item" v-for="item in dataObj.testObj.list" :key="item.id" @click="onApplyTap(item.id)">
							<image class="cover" :src="item.image"></image>
							<view class="title">{{item.title}}</view>
							<view class="state intro">推荐考试</view>
							<view class="time">报名</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import headerMain from '@/components/header/header-main.vue';
	import progressBar from '@/components/progress-bar/progress-bar.vue';
	
	export default {
		components: {
			headerMain,
			progressBar
		},
		data() {
			return {
				pageObj: {
					mobile: '',
					screenHeight: 0, // 记录屏幕高度
					tabIndex: 0,
					tabList: [{
						name: '模拟题库',
						key: 'questionObj'
					}, {
						name: '考试',
						key: 'testObj'
					}]
				},
				dataObj: {
					// 模拟题库
					questionObj: {
						// 菜单类型
						typeValue: '',
						typeList: [{
							value: '1',
							name: '已购买'
						}, {
							value: '2',
							name: '未购买'
						}, {
							value: '',
							name: '全部'
						}],
						list: []
					},
					// 考试
					testObj: {
						// 菜单类型
						typeValue: '',
						typeList: [{
							value: '1',
							name: '已报名'
						}, {
							value: '2',
							name: '未报名'
						}, {
							value: '',
							name: '全部'
						}],
						list: [{
							id: 1,
							image: '',
							title: '职业卫生主要负责人安全培训课程',
							classHour: 16
						}, {
							id: 2,
							image: '',
							title: '职业卫生主要负责人安全培训课程',
							classHour: 16
						}, {
							id: 3,
							image: '',
							title: '职业卫生主要负责人安全培训课程',
							classHour: 16
						}, {
							id: 4,
							image: '',
							title: '职业卫生主要负责人安全培训课程',
							classHour: 16
						}]
					}
				}
			}
		},
		onLoad() {
			const userInfo = uni.getStorageSync('userInfo');
			this.getScreenHeight();
			this.getSubjectList();
			this.pageObj['mobile'] = userInfo['mobile'];
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket:true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus:["shareAppMessage","shareTimeline"]
			});
			// #endif
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getSubjectList();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取屏幕高度，并设置swiper 的高度
			getScreenHeight () {
				uni.getSystemInfo({
				    success: res => {
						this.pageObj['screenHeight'] = res['screenHeight'] - 50; // 减去底部的50
				    }
				});
			},
			// 监听头部子组件的点击事件
			tabClick (index) {
				this.pageObj['tabIndex'] = index;
			},
			// 左右切换主体
			bodySwiperChange (event) {
				this.pageObj['tabIndex'] = event.detail.current;
				this.handleBodyData();
			},
			toFixed(numberStr) {
				return Number(numberStr).toFixed(2)
			},
			// 目录类型
			onCatalogsTap (value) {
				const tapKey = this.getTabKey();
				this.dataObj[tapKey]['typeValue'] = value;
				this.handleBodyData();
			},
			// 获取头部的key
			getTabKey() {
				const index = this.pageObj['tabIndex'];
				return this.pageObj['tabList'][index]['key'];
			},
			// 目录类型
			handleBodyData () {
				const tapKey = this.getTabKey();
				switch(tapKey) {
				case 'testObj':
				case 'questionObj':
					// 课程
					this.getSubjectList();
					break;
				case 'trainingsObj':
					// 培训服务
					this.getTrainingsData();
					break;
				case 'teachVideoObj':
					// 教学视频
					this.getTeachVideoData();
					break;
				default:
					break;
				}
			},
			// 页面跳转
			onPageTap(item) {
				uni.navigateTo({
					url: '/pages/detail/question?name=' + item.exam_name + '&price=' + item.exam_price + '&cover=' + item.exam_img + '&id=' + item.id
				});
				console.log(this.pageObj['mobile'], 'mobile')
				console.log(item, 'item')
				// if (this.pageObj['mobile'] !== '13570238436') {
				// 	uni.navigateTo({
				// 		url: './test?id=' + item['id'] + '&title=' + item['exam_name'] + '&type=' + item['exam_type']
				// 	});
				// } else {
					
				// }
			},
			// 添加购物车
			onAddCartTap (id) {
				this.$Requset({
					url: this.$Api['cart']['add'],
					data: {
						product_id: id,
						cat_type: 4,
						nums: 1,
						num_type: 2
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							uni.showToast({
								title: msg,
								icon: 'none'
							});
							return;
						}
						uni.showToast({
							title: '加入购物车成功',
							icon: 'none'
						});
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 报名
			onApplyTap() {
				console.log('报名');
			},
			// 获取所有科目列表
			getSubjectList() {
				this.$Requset({
					url: this.$Api['exam']['getAllSubjectList'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId')
					},
					success: (res) => {
						const { data, status } = res;
						if (!status) {
							return;
						}
						this.dataObj['questionObj']['list'] = data;
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 获取培训服务数据
			getTrainingsData() {
				console.log('获取培训服务数据');
				// this.$Requset({
				// 	url: this.$Api['course']['gettopcat'],
				// 	data: {},
				// 	success: (res) => {
				// 		const { data, status } = res;
				// 		if (!status) {
				// 			return;
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		console.log(err);
				// 	}
				// })
			},
			// 获取教学视频数据
			getTeachVideoData() {
				console.log('获取教学视频数据');
				// this.$Requset({
				// 	url: this.$Api['course']['gettopcat'],
				// 	data: {},
				// 	success: (res) => {
				// 		const { data, status } = res;
				// 		if (!status) {
				// 			return;
				// 		}
				// 	},
				// 	fail: (err) => {
				// 		console.log(err);
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.classify {
		box-sizing: border-box;
		background-color: #f5f5f5;
		.body-swiper{
			box-sizing: border-box;
			height: 100%;
			padding-top: 90rpx;
			&-item{
				box-sizing: border-box;
				padding-top: 18rpx;
				margin-bottom: 18rpx;
				overflow-y: scroll;
				overflow-x: hidden;
			}
		}
		.block{
			border-radius: 0;
			margin-bottom: 0;
			padding: 32rpx 36rpx;
			.header{
				line-height: 46rpx;
				font-size: 32rpx;
				color: #1A1A1A;
				margin-bottom: 32rpx;
			}
			.select-type{
				float: right;
				height: 46rpx;
				font-size: 0;
				&-item{
					display: inline-block;
					width: 88rpx;
					height: 46rpx;
					line-height: 46rpx;
					font-size: 22rpx;
					color: #7F7F7F;
					background-color: #F7F7F7;
					border-radius: 24rpx;
					text-align: center;
					margin-right: 13rpx;
					&:nth-last-child(1) {
						margin-right: 0;
					}
				}
				.selected{
					color: $color-common;
					background-color: rgba($color: #FE6B00, $alpha: 0.1);
				}
			}
		}
		.list{
			font-size: 0;
			.item{
				position: relative;
				display: inline-block;
				width: 326rpx;
				margin-bottom: 24rpx;
				&:nth-child(2n){
					float: right;
				}
				.cover{
					width: 100%;
					height: 182rpx;
					border-radius: 14rpx;
					background-color: #eee;
					margin-bottom: 14rpx;
				}
				.title{
					height: 64rpx;
					line-height: 32rpx;
					font-size: 24rpx;
					color: #1A1A1A;
					margin-bottom: 2rpx;
				}
				.state{
					position: relative;
					display: inline-block;
					width: 60%;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 22rpx;
					padding-left: 40rpx;
					&::before{
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						width: 40rpx;
						height: 40rpx;
						background-position: center;
						background-repeat: no-repeat;
						background-size: 26rpx 26rpx;
					}
				}
				.cart{
					float: right;
					width: 32rpx;
					height: 32rpx;
					margin-top: 4rpx;
					margin-right: 4rpx;
				}
				.intro{
					color: #FE6B00;
					&::before{
						background-image: url(../../static/images/home/recommend.png);
					}
				}
				.free{
					color: #1BB682;
					&::before{
						background-image: url(../../static/images/home/free.png);
					}
				}
				.time{
					// display: inline-block;
					float: right;
					width: 80rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 22rpx;
					color: #7F7F7F;
					text-align: right;
				}
			}
		}
	}
</style>
